<template>
	<view class="projectDetail-container">
		<view class="project-top">
			<view class="project-name">
				{{ DetailList.name }}
			</view>
			<view class="project-money">
				{{ DetailList.price }}<span>元</span>
			</view>
		</view>
		<view class="tagsList">
			<view class="tags" v-for="(keyword, kIndex) in (DetailList.keywords ? DetailList.keywords.split(',') : [])"
				:key="kIndex">{{ keyword }}</view>
		</view>

		<view class="publisher-container" @tap="gotoPublisher">
			<view class="publisher-avator">
				<view class="cu-avatar round" :style="{ 'background-image': `url(${DetailList.create_user.avatar})` }"></view>
				<span>{{ DetailList.create_user.username }}</span>
			</view>
			<view class="publisher-location">
				<view class="cu-item">
					<text class="lg text-gray cuIcon-right"></text>
				</view>
			</view>
		</view>
		<swiper v-if="DetailList.images !== ''" class="screen-swiper" :class="dotStyle ? 'square-dot' : 'round-dot'"
			:indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item, index) in images" :key="index">
				<image :src="item" mode="aspectFill"></image>

			</swiper-item>
		</swiper>
		<view class="richText">
			<rich-text :nodes="DetailList.content"></rich-text>
		</view>
		<!-- file -->
		<!-- file -->
		<view class="file" v-for="(item, key) in attachfile" :key="key" v-if="DetailList.attachfile !== ''">
			<view class="noImg" @click="downLoad(item)">附件{{ key + 1 }}</view>
			<view class="cu-item">
				<text class="lg text-gray cuIcon-down" style="color: blue;"></text>
			</view>
		</view>
		<!-- 底部栏固定 -->
		<view class="contact-tabbar">
			<!-- <view class="favor-container">
					<view class="cu-item">
						<text class="xl text-gray cuIcon-favor"></text>
					</view>
					<view>收藏</view>
				</view> -->
			<view class="contact-btn">
				<button class="cu-btn bg-blue shadow-blur lg" @tap="$openrul(`/pages/userInfo/userInfo?userid=${DetailList.create_user_id}`)" >立即沟通</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			images: [],
			attachfile: [],
			DetailList: [],
			id: null,
			tagList: [
				{
					id: 1,
					name: '本科'
				},
				{
					id: 2,
					name: '硕士'
				},
				{
					id: 3,
					name: '博士'
				},
			],
		};
	},
	onLoad(query) {
		// 从 query 中获取传递的参数
		this.id = query.param1 || '';


	},
	mounted() {
		this.getProjectDetail()
	},
	methods: {
		deleteItem(index) {
			uni.showModal({
				title: '提示',
				content: '确定要删除此项吗？',
				success: res => {
					if (res.confirm) {
						this.attachfile.splice(index, 1);
					}
				}
			});
		},
		downLoad(url) {
			uni.showModal({
				title: '确定要下载此附件吗',
				content: ' ',
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: '下载中,请稍后'
						});
						console.log(url);
						uni.downloadFile({
							url: url,
							success: res => {
								var tempFile = res.tempFilePath;
								uni.saveFile({
									tempFilePath: res.tempFilePath,
									success: res => {
										var savedFilePath = res.savedFilePath;
										uni.hideLoading();
										uni.showToast({
											title: '保存成功，路径为' + savedFilePath
										});
										uni.openDocument({
											filePath: savedFilePath,
											success: function (res) {
												console.log(res);
											}
										});
									}
								});
							},
							fail: res => {
								console.log(res);
								uni.hideLoading();
								uni.showToast({
									title: '下载失败',
									icon: 'none'
								});
							}
						});

						setTimeout(function () {
							uni.hideLoading();
						}, 20000);

						// downloadTask.onProgressUpdate((res) => {
						//     console.log('下载中,进度' +  res.progress)
						// });
					}
				}
			});
		},
		async getProjectDetail() {

			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.projectDetail,
				data: {
					id: this.id
				}
			})

			this.DetailList = res.data.detail
			console.log('this.DetailList: ', this.DetailList)


			this.images = this.DetailList.images.split(',');
			// console.log('this.images: ', this.images)
			// 定义域名前缀
			let domainPrefix = this.$myHttp.config.baseUrl;
			domainPrefix = domainPrefix.replace(/\/$/, '');
			this.images = this.images.map(item => domainPrefix + item);

			this.attachfile = this.DetailList.attachfile.split(',');
			this.attachfile = this.attachfile.map(item => domainPrefix + item);
			// console.log('this.attachfile: ', this.attachfile)

		},
		gotoPublisher() {
			uni.navigateTo({
				url: '/subpackage/publisher-project/publisher-project?userid=' + this.DetailList.create_user.id + '&name=' + this.DetailList.create_user.username + '&avatar=' + this.DetailList.create_user.avatar
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.file {
	width: 200rpx;
	border: 1px solid #ccc;
	// border-radius: 10upx;
	box-sizing: border-box;
	margin-top: 20upx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10rpx;
	background-color: #fff;

	& .noImg {
		display: flex;
		justify-content: center;
		text-align: left;
		font-size: 26upx;
		// flex-wrap: wrap;
		color: blue;
		word-break: break-all;
		box-sizing: border-box;
	}
}

.publisher-container .publisher-avator ._span {
	margin-left: 10rpx;
	font-size: 14px !important;
}

.publisher-container .publisher-location text {
	font-size: 18px !important;
	color: #A8A8A8;
}

.cu-btn.lg {
	padding: 0 40rpx;
	font-size: 38rpx;
	height: 100rpx;
	width: 200px;
}

.contact-tabbar {
	.contact-btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.favor-container {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-left: 50rpx;
	}

	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
	font-size: 18px;
	box-shadow: 0 0 10rpx #ccc;
	z-index: 999;
}

.richText {
	margin: 20rpx 0;
}

.projectDetail-container {
	background-color: #fff;
	height: 100vh;
	padding: 20upx 20upx;
}

.project-top {
	margin-bottom: 20rpx;
	display: flex;
	font-size: 18px;
	justify-content: space-between;
	align-items: center;

	span {
		font-size: 12px;
		font-weight: normal;
		margin-left: 5rpx;
	}
}

.tagsList {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 12px;

	.tags {
		color: #1094A3;
		background-color: #E7F4F6;
		padding: 2px 5px;
		border-radius: 10rpx;
		margin-right: 10px;
	}
}

.publisher-container {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20rpx;
	padding: 20rpx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;

	.publisher-avator {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		span {
			margin-left: 10rpx;
		}
	}

	.publisher-location {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		text {
			font-size: 12px;
			color: #A8A8A8;
		}
	}
}
</style>
